<template>
  <!-- :style="{ width: width + 'px', height: height + 'px' }" -->
  <div ref="scatter" style="width: 100%;height: 100%;" />
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import * as echarts from 'echarts'
export default {
  props: {
    fontSize: {
      type: Number,
      default: 16
    },
    title: {
      type: String,
      default: ''
    }
  },
  // name属性
  name: 'Scatter',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      QiuList: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5, 5.68]
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.init()
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    dataArrFn(data) {
      const plantCap = []
      data.forEach(m => {
        plantCap.push({ value: m })
      })
      let scale = 1,
        zoomO = 1280 / 745,
        ddw = document.documentElement.clientWidth,
        ddh = document.documentElement.clientHeight,
        zoomNow = ddw / ddh,
        zoomNum = 1

      scale = ResizeChat()
      function ResizeChat() {
        if (zoomNow > zoomO) {
          var newW = (1280 * ddh) / 745
          zoomNum = newW / 1280
        } else {
          var newH = (745 * ddw) / 1280
          zoomNum = newH / 745
        }
        return zoomNum
      }
      const datas = []
      reSize(plantCap)
      function reSize(plantCap) {
        // 通过值来改变球的大小
        var maxArr = []
        plantCap.forEach(function(item) {
          maxArr.push(item.value)
        })
        var maxNum = 30 // 获取最大值
        plantCap.forEach(function(item, index) {
          item.symbolSize = (plantCap[index].value[1] / maxNum) * 100
        })
      }

      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i]
        datas.push({
          // name: item.name + '\n' + item[1] + '分',
          name: item[1] + '分',
          value: item.value,
          // symbolSize: item.symbolSize * scale,
          label: {
            normal: {
              textStyle: {
                fontSize: '75%',
                lineHeight: '200'
              }
            }
          }
        })
      }
      return datas
    },
    calMax(array) {
      const list = []
      array.forEach((item) => {
        list.push(item[1])
      })
      let max = 0
      if (list.length > 0) {
        max = Math.max(...list)
      }
      const maxint = Math.ceil(max / 8), // 不让最高的值超过最上面的刻度
        maxval = maxint * 10 // 让显示的刻度是整数
      return maxval
    },
    init(list, indicator) {
      const that = this,
        charts = echarts.init(this.$refs.scatter),
        option = {
          title: {
            text: that.title + ' ' + that.$t('Historical_data_trends'),
            left: 40,
            top: 10,
            textStyle: {
              fontSize: this.fontSize,
              color: '#0EE4F9'
            }
          },
          tooltip: {
            // trigger: 'axis',
            showDelay: 0,
            formatter: function(params) {
              if (params.value.length > 1) {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  // params.value[0] +
                  // ' - ' +
                  params.value[1]
                );
              } else {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  // params.name +
                  // ' - ' +
                  params.value
                );
              }
            },
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          xAxis: [
            {
              // type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                interval: 0,
                rotate: 30,
                color: '#FFFFFF'
              },
              data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
            }
          ],
          yAxis: [
            {
              // type: 'value',
              axisLabel: {
                interval: 0,
                rotate: 30,
                color: '#FFFFFF'
              },
              splitLine: {
                show: false
              },
              min: 0,
              max: this.calMax(list)
            }
          ],
          series: [
            {
              name: that.title,
              symbolSize: 20,
              data: list,
              type: 'scatter',
              markLine: {
                data: [
                  {
                    silent: false,
                    yAxis: indicator || 0, // 警戒线位置，这个赋值为纵轴50
                    label: {
                      position: 'end', // 文字位置
                      formatter: '基准线', // 文 字
                      color: '#FFFFFF' // 文字颜色
                    },
                    lineStyle: { type: 'solid', color: '#FFFFFF', width: 3 } // 样式： 线型、颜色、线宽
                  }
                ]
              }
            }
          ]
        }
      charts.setOption(option)
    }
  }
}
</script>

<style lang='scss' scoped></style>
